<template>
  <div class="dashboard">
    <home-page-top/>
    <div>
      <div class="ind-con-lf">
        <div class="ind-con-lf-top">
          <ul v-if="historyList.length">
            <li v-for="(item, index) in historyList" v-if="index<5" :key="item.id">
              <span>
                <a @click="linkToSite(item)" :href="item.siteUrl" target="_blank"><img style="width: 94px;height: 94px;" :src="item.siteLogo"></a>
              </span>
              <p>{{item.siteName}}</p>
            </li>
            <li></li>
          </ul>
          <div v-if="!historyList.length&&!loading" style="padding: 40px;text-align: center;font-size: 16px;color: #999;">
            暂无内容
          </div>
        </div>
      </div>
      <div class="ind-con-rg">
        <div class="ind-con-rg-grinfo">
          <div class="ind-con-rg-grinfo-top">
            <span class="ind-con-rg-grinfo-set">
              <a @click="linkToAccount()" href="javascript:void(0)"><img src="../../assets/set-button.png"></a>
            </span>
            <span class="ind-con-rg-grinfo-photo" v-if="userInfo.avatar">
              <!-- <img style="width:68px;height:68px;position: relative;top: -1px;" :src="userInfo.avatar"> -->
              <img v-if="userInfo.avatar&&/^[0-9]$/.test(userInfo.avatar)" style="width:68px;height:68px;position: relative;top: -1px;" :src="defaultAvatar" id="basInfoImg" class="layui-upload-img">
              <img v-if="userInfo.avatar&&!/^[0-9]$/.test(userInfo.avatar)" style="width:68px;height:68px;position: relative;top: -1px;" :src="userInfo.avatar" id="basInfoImg" class="layui-upload-img">
              <img v-if="!userInfo.avatar" style="width:68px;height:68px;position: relative;top: -1px;" :src="defaultImg" id="basInfoImg" class="layui-upload-img">
            </span>
            <a href="javascript:void(0)" class="ind-cg-ph" @click="linkToAccount()">更换头像</a>
            <div class="ind-con-rg-grinfo-rz">
              <a v-if="userInfo.phone" href="javascript:void(0)" @click="globalThis.changePhoneNum()">
                <span><img src="../../assets/phone-img.png"></span>
              </a>
              <a v-if="!userInfo.phone" href="javascript:void(0)" @click="globalThis.bindPhoneNum()">
                <span><img src="../../assets/phone-img.png"></span>
              </a>
              <a v-if="userInfo.email" href="javascript:void(0)" @click="globalThis.changeEmail()">
                <span><img src="../../assets/mail-img.png"></span>
              </a>
              <a v-if="!userInfo.email" href="javascript:void(0)" @click="globalThis.bindEmail()">
                <span><img src="../../assets/mail-img.png"></span>
              </a>
            </div>
          </div>
        </div>
        <div class="pub-item rmtj">
          <div class="pub-item-head rmtj-head">
            <img src="../../assets/hot-log.png">
            <b>热门文章</b>
          </div>
          <div class="pub-item-con rmtj-con">
            <ul>
              <li v-for="(item, index) in articleList" v-if="index<10" :key="index">
                <label :class="{'active-artical':index<3}">{{index+1}}</label>
                <span class="rmtj-txt">
                  <a :href="item.manuscriptPath" target="_blank">{{item.headline}}</a>
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HomePageTop from '@/components/home-page-top'
import * as api from '@/service/api'
import { mapState } from 'vuex'
export default {
  title: '用户中心-首页',
  data () {
    return {
      loading: false,
      globalThis: null,
      defaultImg: '',
      defaultAvatar: '',
      layerLoad: null,
      historyList: [],
      articleList: [],
      pageSize: 10,
      pageIndex: 1,
      height: 20
    }
  },
  components: {
    HomePageTop
  },
  computed: mapState({
    userInfo: state => state.me.user || {}
  }),
  created () {
    this.globalThis = window
    this.layerLoad = window.layer.load(0, {
      shade: false
    })
    // this.userInfo = this.$store.state.me.user
  },
  mounted () {
    this.getUserFoot()
    this.getUserArticle()
    this.defaultAvatar = `static/img/avatar${this.userInfo.avatar}.png`
    this.defaultImg = 'static/img/avatar1.png'
  },
  watch: {
    userInfo () {
      if (this.userInfo.avatar) {
        this.defaultAvatar = `static/img/avatar${this.userInfo.avatar}.png`
        this.defaultImg = 'static/img/avatar1.png'
      }
    }
  },
  methods: {
    linkToAccount () {
      this.$store.dispatch('linkToAccount')
    },
    linkToSite (item) {
      this.modifyUserFoot(item)
    },
    async modifyUserFoot (item) {
      try {
        await api.modifyUserFoot({
          userId: this.userInfo.userId,
          siteUrl: item.siteUrl,
          siteName: item.siteName,
          siteLogo: item.siteLogo
        })
      } catch (e) {
        console.log(e)
      }
    },
    async getUserFoot () {
      try {
        this.loading = true
        let res = await api.getUserFoot({
          userId: this.userInfo.userId,
          pageNum: this.pageSize,
          pageIndex: this.pageIndex
        })
        this.historyList = res.data.list
        this.loading = false
        window.layer.close(this.layerLoad)
      } catch (e) {
        console.log(e)
        this.loading = false
        window.layer.close(this.layerLoad)
      }
    },
    async getUserArticle () {
      try {
        let res = await api.getUserArticle()
        this.articleList = res.data
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style lang="scss">
.dashboard {
  .active-artical {
    background: #f72929;
  }
}
</style>
